<script src="https://d3js.org/d3.v4.js"></script>

<script src="../node_modules/d3-color/build/d3-color.js"></script>
<script src="../build/d3-cam16.js"></script>

<canvas id="crosssection_10" width="300" height="300"></canvas>
<canvas id="crosssection_20" width="300" height="300"></canvas>
<canvas id="crosssection_30" width="300" height="300"></canvas>
<canvas id="crosssection_40" width="300" height="300"></canvas>
<canvas id="crosssection_50" width="300" height="300"></canvas>
<canvas id="crosssection_60" width="300" height="300"></canvas>
<canvas id="crosssection_70" width="300" height="300"></canvas>
<canvas id="crosssection_80" width="300" height="300"></canvas>
<canvas id="crosssection_90" width="300" height="300"></canvas>

<script>
function render(name, J) {
  var canvas = document.getElementById(name),
      context = canvas.getContext("2d");

    var height = canvas.height,
        width = canvas.width,
        img = context.createImageData(width, height);

    var c,y,x,i=-1;
    for(y=height;y>0;y--) {
      for(x=width;x>0;x--) {
        c = d3.cam16.fromNonUcsJab(J, -(x-width/2)/100, (y-height/2)/100);
        c = c.rgb();
        if(c.displayable() === false) c = d3.rgb(0,0,0);
        img.data[++i] = c.r;
        img.data[++i] = c.g;
        img.data[++i] = c.b;
        img.data[++i] = 255;
      }
    }

    context.putImageData(img, 0, 0);
}

for(var i = 10; i < 100; i+=10) {
  render("crosssection_"+i, i);
}
</script>
